<template>
  <div>
    <el-row>
      <el-button @click="onAdd">增加</el-button>
      <el-button @click="onDelLast">删除</el-button>
    </el-row>
    <draggable :list="DataList" item-key="name">
      <template #item="{ element }">
        <el-row>
          <el-button>
            {{ element.name }}
          </el-button>
        </el-row>
      </template>
      <template #footer>
        <button @click="addPeople">Add</button>
      </template>
    </draggable>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import draggable from "vuedraggable";
@Options({
  components: { draggable },
  computed: {},
})
export default class DragDemo1 extends Vue {
  private DataList: any[] = [{ name: "1" }, { name: "2" }, { name: "3" }];
  public created() {}
  private onAdd() {
    let iLen = this.DataList.length + 1;
    this.DataList.push({ name: iLen.toString() });
  }
  private onDelLast() {
    let iLen = this.DataList.length - 1;
    this.DataList.splice(iLen, 1);
  }
}
</script>
<style scoped>
</style>